<template>
	<view class="wrap scoll-nav nvue">
		<view class="homeBox">
			<scroll-view :enable-flex="false" scroll-with-animation :throttle="false" @scroll="scroll" :scroll-left="scrollLeft" scroll-x>
				<view class="tabBox">
					<view class="tab-item" 
					:class="tabIndex == index ? 'hover' : ''"
					:key="index" v-for="(item, index) in list" 
					@click="changeIndex(index)"
					>
						<text :class="tabIndex == index ? 'tab-choice' : ''">{{ item || item.title }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			// 当前选中的坐标
			tabIndex:{
				type:Number,
				default:0
			},
			// 数据列表
			list:{
				type:Array,
				default:[]
			},
			// 屏幕宽度
			screenWidth:{
				type:Number,
				default:0
			}
		},
		name: "FatFatMeng-NVUE-Tabs-h",
		data() {
			return {
				tabList: [], //tab dom节点集合
				scrollLeft: 0, //scrollview需要滚动的距离
				phoenWidth:this.screenWidth ,//屏幕宽度
				itemWidth:80,//元素的宽度，直接固定死，nvue下使用
			};
		},
		watch:{
			// curIndex:function(index) {
			// 	this.scrollLeft = this.tabList[index].left - ((345 - this.tabList[index].width) / 2)
			// }
		},
		mounted() {
			// #ifndef APP-NVUE || APP-PLUS-NVUE
			this.init();
			// #endif	
			
			
		},
		created(){
			//this.init();
			
		},
		
		methods:{
			// #ifndef APP-NVUE || APP-PLUS-NVUE
			init() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.tab-item').fields({
					rect: true,
					size: true
				}, data => {
					// TODO 第一步 获取当前所以子元素 并插入到 tabList 列表中
					data.forEach(item => {
						//console.log(item.left)
						this.tabList.push({
							width: item.width,
							left: item.left
						});
					});
					
				});
				query.exec();
			},
			// #endif
			changeIndex(index) {
				
				//当前滚动的位置  
				//this.tabList[index].left 会使当前选中的距离左边为0 
				//然后 用屏幕宽度减去当前元素的宽度 / 2  则会让他处于中间位置
				// #ifndef APP-NVUE || APP-PLUS-NVUE
				this.scrollLeft = this.tabList[index].left - ((345 - this.tabList[index].width) / 2)
				// #endif
				
				// 只在NVUE下
				// #ifdef APP-NVUE || APP-PLUS-NVUE
				this.scrollLeft = this.phoenWidth - ((345 - this.itemWidth) / 2)
				// #endif
				console.log("scrollLeft = " + this.scrollLeft)
				
				console.log(index)
				this.$emit('change',index)
			},
			scroll:function (e){
				// 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './NVUE-Tabs-h.scss';
</style>
